<template>
    <div class="mainpagemedicine">
        <div class="contentbox">
            <div class="searchbox">
                <form action="/">
                    <van-search
                        v-model="value"
                        shape="round"
                        background="#409EFF"
                        placeholder="请输入搜索关键词"
                    />
                </form>
            </div>
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <van-cell v-for="data in datas" :key="data.id" :title="data.name" router-link :to="'/medicine2detail/'+data.id">
            </van-cell>
            </van-list>
            <bottomBar />
        </div>
    </div>
</template>
<script>
import bottomBar from '../components/bottomBar.vue'

export default {
    data(){
        return{
            value: '',
            list: [],
            loading: false,
            finished: false,
            datas:[],
        }
    },
    methods: {
        onSearch(val) {
            Toast(val);
        },
        onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
            for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
            }

            // 加载状态结束
            this.loading = false;

            // 数据全部加载完成
            if (this.list.length >= 40) {
            this.finished = true;
            }
        }, 1000);
        },
        getdata(){
                this.$axios.get("http://localhost:3000/medicinedetail")
                .then(res =>{
                    // console.log(res.data)
                    this.datas=res.data
                    console.log(this.datas)
                    console.log("aaaa")
                })
        },
    },
    components: {
        bottomBar
    },
    mounted:function(){
            this.getdata();
        }
}
</script>
